<template>
    <div class="info-main">
        <h3>{{con.title}}</h3>
        <div class="tip">
            <span class="date">{{con.add_time | timeFormat}}</span>
            <span class="click">点击：{{con.click}}次</span>
        </div>
        <hr>


        <div class="thumbs">
            <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        </div>

        <div class="content" v-html="con.content"></div>

<!--        评论模块-->
        <comment :id="id"></comment>
    </div>
</template>

<script>
    import axios from "axios"
    import comment from "../subcom/comment.vue"

    export default {
        name: "photoinfo",
        data(){
            return{
                id: this.$route.params.id,
                con: [],
                slide1:[]
            }
        },
        methods:{
            getcon(){
                axios.get("api/getimageinfo/"+ this.id)
                    .then(suc=>{
                        // console.log(suc)
                        this.con = suc.data.message[0];
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            getpic(id){
                axios.get("api/getthumimages/"+this.id)
                    .then(suc=>{
                        suc.data.message.forEach(value=>{
                            value.h = 400
                            value.w = 600
                            value.msrc = value.src
                        });
                        this.slide1 = suc.data.message
                        // console.log(suc)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            handleClose(){
                console.log("close event")
            }
        },
        components:{
            "comment": comment
        },
        created(){
            this.getcon()
            this.getpic(this.id)
        }
    }
</script>

<style scoped lang="less">
    .info-main{
        padding: 0 10px;
        h3{
            font-size: 15px;
            color: deepskyblue;
            text-align: center;
            margin: 13px 0;
        }
        .tip{
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }

        .content{
            font-size: 13px;
            line-height: 20px;
        }
        .thumbs {
            /deep/.my-gallery {  //？？？？？？？？？？？？
                display: flex;
                flex-wrap: wrap;
                figure {
                    width: 30%;
                    margin: 5px;
                    img {
                        width: 100%;
                    }
                }
            }
        }

    }
</style>